
//这个配置文件，其实就是一个js文件且通过Node中的模块操作向外暴露了一个配置对象
const path = require('path')
//启用热更新的第二步
const webpack = require('webpack')
//导入在内存中生成HTML页面的插件
//只要是插件都要放到plugin节点
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
//再配置文件中，需要手动指定入口和出口
entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
},
mode:'development',//development production
devServer:{
    //这是配置dev-server命令参数的第二种形式，相对来说这种方式能麻烦一些
    open: true,//自动打开浏览器
    port:3000,
    contentBase:'src',
    hot:true//启用热更新的第一步
},
plugins:[
    //配置插件的节点
   new webpack.HotModuleReplacementPlugin(),//new 一个热更新模块对象，这是启动热更新的第三部
   new htmlWebpackPlugin({
       template:path.join(__dirname,'./src/index.html'),
       filename:'index.html'//指定生成页面的名称
   }),
   new VueLoaderPlugin()

],
module:{
    //这个节点用于配置所有第三方模块的加载器
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=266242&name=[hash:8]-[name].[ext]'},//处理图片路径的loader,limit给定的值是图片的大小，单位是byte.如果引用的图片大于或者等于给定的limit值，则不会转为64，如果给定的limit值小于就会转为
        {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件的loader
        {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},{test:/\.vue$/, use:'vue-loader'},
    ]
},
resolve:{
    alias:{
        'vue$':'vue/dist/vue.js'
    }
}
}
//当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步：
//1，首先，webpack发现我么们并没有通过命令的形式，给它指定入口和出口
//2，webpack就会去项目的根目录中，找一个叫做webpack.config.js的配置文件
//3，当我们找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后就得到了配置文件
//4，当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建